Skip to content

Commit

Permalink
Release 0.2.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@danielma
danielma committed Nov 9, 2021
1 parent 8e82b5c commit 7350787
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 111 deletions.
51 changes: 14 additions & 37 deletions dist/index.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,6 +442,7 @@ var SpinnerImg = function (_React$Component) {
{ className: "p-r" },
React.createElement("img", _extends({}, rest, {
src: this.state.loaded ? src : blank,
className: "unsplash-react__image",
style: _extends({}, style, {
transition: "opacity .3s, " + style.transition,
opacity: loaded ? 1 : 0
Expand Down Expand Up @@ -917,7 +918,8 @@ var inputNoAppearanceStyle = {
backgroundColor: "transparent",
boxShadow: "none",
fontSize: "1em",
outline: "none"
outline: "none",
height: "inherit"
};

var inputGray = "#AAA";
Expand Down Expand Up @@ -1210,8 +1212,12 @@ var UnsplashPicker = function (_React$Component) {
React.createElement(
"div",
{
className: "h-f",
style: { overflowY: "scroll" },
className: "h-f unsplash-react__image-grid",
style: {
overflowY: "scroll",
"--imageWidth": searchResultWidth + "px",
"--imageHeight": searchResultHeight + "px"
},
ref: function ref(element) {
return _this2.searchResults = element;
}
Expand All @@ -1232,14 +1238,10 @@ var UnsplashPicker = function (_React$Component) {
{ style: { color: inputGray } },
error
)
) : [photos.map(function (photo, index) {
) : [photos.map(function (photo) {
return React.createElement(Photo, {
key: photo.id,
photo: photo,
index: index,
width: searchResultWidth,
height: searchResultHeight,
columns: searchResultColumns,
loadingPhoto: loadingPhoto,
selectedPhoto: selectedPhoto,
onPhotoClick: _this2.handlePhotoClick,
Expand Down Expand Up @@ -1335,7 +1337,7 @@ UnsplashPicker.defaultProps = {
function CSSStyles() {
return React.createElement("style", {
dangerouslySetInnerHTML: {
__html: "\n .unsplash-react, .unsplash-react * { box-sizing: border-box }\n .unsplash-react input::placeholder {\n color: " + inputGray + ";\n opacity: 1;\n }\n @keyframes unsplash-react-fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .unsplash-react .p-r { position: relative; }\n .unsplash-react .p-a { position: absolute; }\n\n .unsplash-react.p-0,\n .unsplash-react .p-0 { padding: 0; }\n\n .unsplash-react .f-1 { flex: 1; }\n\n .unsplash-react.d-f,\n .unsplash-react .d-f { display: flex; }\n\n .unsplash-react.h-f,\n .unsplash-react .h-f { height: 100%; }\n\n .unsplash-react.border-radius,\n .unsplash-react .border-radius { border-radius: " + borderRadius + "px; }\n "
__html: "\n .unsplash-react, .unsplash-react * { box-sizing: border-box }\n .unsplash-react input::placeholder {\n color: " + inputGray + ";\n opacity: 1;\n }\n @keyframes unsplash-react-fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .unsplash-react .p-r { position: relative; }\n .unsplash-react .p-a { position: absolute; }\n\n .unsplash-react.p-0,\n .unsplash-react .p-0 { padding: 0; }\n\n .unsplash-react .f-1 { flex: 1; }\n\n .unsplash-react.d-f,\n .unsplash-react .d-f { display: flex; }\n\n .unsplash-react.h-f,\n .unsplash-react .h-f { height: 100%; }\n\n .unsplash-react.ai-c,\n .unsplash-react .ai-c { align-items: center; }\n\n .unsplash-react.border-radius,\n .unsplash-react .border-radius { border-radius: " + borderRadius + "px; }\n\n .unsplash-react .unsplash-react__image-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(calc(var(--imageWidth) - 16px), 1fr));\n gap: 12px;\n }\n\n .unsplash-react__image {\n display: block;\n width: 100%;\n height: var(--imageHeight);\n object-fit: cover;\n }\n "
}
});
}
Expand All @@ -1348,10 +1350,10 @@ function SearchInputIcon(_ref5) {
rest = objectWithoutProperties(_ref5, ["isLoading", "hasError", "style"]);

var searchColor = hasError ? "#D62828" : inputGray;
var mergedStyle = _extends({ top: "0.15em", marginRight: ".5em" }, style);
var mergedStyle = _extends({ marginRight: ".5em" }, style);
return React.createElement(
"div",
_extends({ className: "p-r", style: mergedStyle }, rest),
_extends({ className: "p-r d-f ai-c", style: mergedStyle }, rest),
isLoading ? React.createElement(Spinner, { size: "1em", color: searchColor }) : React.createElement(SearchIcon, { width: "1em", height: "1em", style: { color: searchColor } })
);
}
Expand Down Expand Up @@ -1426,10 +1428,6 @@ Photo.propTypes = {
}).isRequired,
user: shape$5({ links: shape$5({ html: string$9.isRequired }).isRequired }).isRequired
}).isRequired,
width: number$3.isRequired,
height: number$3.isRequired,
index: number$3.isRequired,
columns: number$3.isRequired,
loadingPhoto: shape$5({ id: string$9.isRequired }),
selectedPhoto: shape$5({ id: string$9.isRequired }),
onPhotoClick: func$6.isRequired,
Expand All @@ -1438,17 +1436,12 @@ Photo.propTypes = {
};
function Photo(_ref8) {
var photo = _ref8.photo,
width = _ref8.width,
height = _ref8.height,
index = _ref8.index,
columns = _ref8.columns,
loadingPhoto = _ref8.loadingPhoto,
selectedPhoto = _ref8.selectedPhoto,
onPhotoClick = _ref8.onPhotoClick,
highlightColor = _ref8.highlightColor,
utmLink = _ref8.utmLink;

var isFarLeft = index % columns === 0;
var loadingPhotoId = loadingPhoto && loadingPhoto.id;
var selectedPhotoId = selectedPhoto && selectedPhoto.id;
var isSelectedAndLoaded = loadingPhotoId === null && selectedPhotoId === photo.id;
Expand All @@ -1459,19 +1452,7 @@ function Photo(_ref8) {

return React.createElement(
"div",
{
style: {
display: "inline-block",
width: width,
marginTop: 0,
marginBottom: 12,
marginLeft: 0,
marginRight: 0,
paddingTop: ".5em",
paddingLeft: isFarLeft || ".5em"
},
className: "p-0"
},
null,
React.createElement(
"div",
{
Expand All @@ -1487,10 +1468,6 @@ function Photo(_ref8) {
React.createElement(SpinnerImg, {
src: photo.urls.small,
style: {
display: "block",
width: "100%",
height: height,
objectFit: "cover",
borderWidth: borderWidth,
borderStyle: "solid",
borderColor: isSelectedAndLoaded ? highlightColor : "transparent",
Expand Down
51 changes: 14 additions & 37 deletions dist/index.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,6 +436,7 @@ var SpinnerImg = function (_React$Component) {
{ className: "p-r" },
React.createElement("img", _extends({}, rest, {
src: this.state.loaded ? src : blank,
className: "unsplash-react__image",
style: _extends({}, style, {
transition: "opacity .3s, " + style.transition,
opacity: loaded ? 1 : 0
Expand Down Expand Up @@ -911,7 +912,8 @@ var inputNoAppearanceStyle = {
backgroundColor: "transparent",
boxShadow: "none",
fontSize: "1em",
outline: "none"
outline: "none",
height: "inherit"
};

var inputGray = "#AAA";
Expand Down Expand Up @@ -1204,8 +1206,12 @@ var UnsplashPicker = function (_React$Component) {
React.createElement(
"div",
{
className: "h-f",
style: { overflowY: "scroll" },
className: "h-f unsplash-react__image-grid",
style: {
overflowY: "scroll",
"--imageWidth": searchResultWidth + "px",
"--imageHeight": searchResultHeight + "px"
},
ref: function ref(element) {
return _this2.searchResults = element;
}
Expand All @@ -1226,14 +1232,10 @@ var UnsplashPicker = function (_React$Component) {
{ style: { color: inputGray } },
error
)
) : [photos.map(function (photo, index) {
) : [photos.map(function (photo) {
return React.createElement(Photo, {
key: photo.id,
photo: photo,
index: index,
width: searchResultWidth,
height: searchResultHeight,
columns: searchResultColumns,
loadingPhoto: loadingPhoto,
selectedPhoto: selectedPhoto,
onPhotoClick: _this2.handlePhotoClick,
Expand Down Expand Up @@ -1329,7 +1331,7 @@ UnsplashPicker.defaultProps = {
function CSSStyles() {
return React.createElement("style", {
dangerouslySetInnerHTML: {
__html: "\n .unsplash-react, .unsplash-react * { box-sizing: border-box }\n .unsplash-react input::placeholder {\n color: " + inputGray + ";\n opacity: 1;\n }\n @keyframes unsplash-react-fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .unsplash-react .p-r { position: relative; }\n .unsplash-react .p-a { position: absolute; }\n\n .unsplash-react.p-0,\n .unsplash-react .p-0 { padding: 0; }\n\n .unsplash-react .f-1 { flex: 1; }\n\n .unsplash-react.d-f,\n .unsplash-react .d-f { display: flex; }\n\n .unsplash-react.h-f,\n .unsplash-react .h-f { height: 100%; }\n\n .unsplash-react.border-radius,\n .unsplash-react .border-radius { border-radius: " + borderRadius + "px; }\n "
__html: "\n .unsplash-react, .unsplash-react * { box-sizing: border-box }\n .unsplash-react input::placeholder {\n color: " + inputGray + ";\n opacity: 1;\n }\n @keyframes unsplash-react-fadein {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n .unsplash-react .p-r { position: relative; }\n .unsplash-react .p-a { position: absolute; }\n\n .unsplash-react.p-0,\n .unsplash-react .p-0 { padding: 0; }\n\n .unsplash-react .f-1 { flex: 1; }\n\n .unsplash-react.d-f,\n .unsplash-react .d-f { display: flex; }\n\n .unsplash-react.h-f,\n .unsplash-react .h-f { height: 100%; }\n\n .unsplash-react.ai-c,\n .unsplash-react .ai-c { align-items: center; }\n\n .unsplash-react.border-radius,\n .unsplash-react .border-radius { border-radius: " + borderRadius + "px; }\n\n .unsplash-react .unsplash-react__image-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(calc(var(--imageWidth) - 16px), 1fr));\n gap: 12px;\n }\n\n .unsplash-react__image {\n display: block;\n width: 100%;\n height: var(--imageHeight);\n object-fit: cover;\n }\n "
}
});
}
Expand All @@ -1342,10 +1344,10 @@ function SearchInputIcon(_ref5) {
rest = objectWithoutProperties(_ref5, ["isLoading", "hasError", "style"]);

var searchColor = hasError ? "#D62828" : inputGray;
var mergedStyle = _extends({ top: "0.15em", marginRight: ".5em" }, style);
var mergedStyle = _extends({ marginRight: ".5em" }, style);
return React.createElement(
"div",
_extends({ className: "p-r", style: mergedStyle }, rest),
_extends({ className: "p-r d-f ai-c", style: mergedStyle }, rest),
isLoading ? React.createElement(Spinner, { size: "1em", color: searchColor }) : React.createElement(SearchIcon, { width: "1em", height: "1em", style: { color: searchColor } })
);
}
Expand Down Expand Up @@ -1420,10 +1422,6 @@ Photo.propTypes = {
}).isRequired,
user: shape$5({ links: shape$5({ html: string$9.isRequired }).isRequired }).isRequired
}).isRequired,
width: number$3.isRequired,
height: number$3.isRequired,
index: number$3.isRequired,
columns: number$3.isRequired,
loadingPhoto: shape$5({ id: string$9.isRequired }),
selectedPhoto: shape$5({ id: string$9.isRequired }),
onPhotoClick: func$6.isRequired,
Expand All @@ -1432,17 +1430,12 @@ Photo.propTypes = {
};
function Photo(_ref8) {
var photo = _ref8.photo,
width = _ref8.width,
height = _ref8.height,
index = _ref8.index,
columns = _ref8.columns,
loadingPhoto = _ref8.loadingPhoto,
selectedPhoto = _ref8.selectedPhoto,
onPhotoClick = _ref8.onPhotoClick,
highlightColor = _ref8.highlightColor,
utmLink = _ref8.utmLink;

var isFarLeft = index % columns === 0;
var loadingPhotoId = loadingPhoto && loadingPhoto.id;
var selectedPhotoId = selectedPhoto && selectedPhoto.id;
var isSelectedAndLoaded = loadingPhotoId === null && selectedPhotoId === photo.id;
Expand All @@ -1453,19 +1446,7 @@ function Photo(_ref8) {

return React.createElement(
"div",
{
style: {
display: "inline-block",
width: width,
marginTop: 0,
marginBottom: 12,
marginLeft: 0,
marginRight: 0,
paddingTop: ".5em",
paddingLeft: isFarLeft || ".5em"
},
className: "p-0"
},
null,
React.createElement(
"div",
{
Expand All @@ -1481,10 +1462,6 @@ function Photo(_ref8) {
React.createElement(SpinnerImg, {
src: photo.urls.small,
style: {
display: "block",
width: "100%",
height: height,
objectFit: "cover",
borderWidth: borderWidth,
borderStyle: "solid",
borderColor: isSelectedAndLoaded ? highlightColor : "transparent",
Expand Down
Loading

0 comments on commit 7350787

Please sign in to comment.