@willphan1712000/frontend 1.5.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +11 -2
  2. package/dist/index.d.ts +11 -2
  3. package/dist/index.js +62 -60
  4. package/dist/index.mjs +67 -65
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -122,6 +122,9 @@ declare const Button: ({ buttonType, content, main, first, second, text, isLoadi
122
122
  interface Props$6 {
123
123
  src?: string;
124
124
  setValue: (src?: string) => void;
125
+ options?: {
126
+ defaultImage?: string;
127
+ };
125
128
  }
126
129
  /**
127
130
  * Avatar component. Combination of
@@ -135,15 +138,21 @@ interface Props$6 {
135
138
  * @param src source of an image which will be converted to base64 format automatically
136
139
  * @param setValue set state function for src
137
140
  *
141
+ * @dataflow
142
+ * - source of an image can be undefined. This case, source should be set to default image. In case there is no default image provided, source should be undefined. As source of image is edited, source changes and updates on the image preview
143
+ * - Every source needs to be converted to base64 format using provided conversion method
144
+ * - There is a defaultImage reference that stores the value of default image across the entire component so it can be used to restore default image when clicking delete button or when source of image is undefined
145
+ * - There is an initialImage reference that stores the value of an initial value of image source
146
+ *
138
147
  * @example
139
148
  * ... component declaration
140
149
  * const [src, setValue] = useState<string|undefined>(initialImageStringUrl)
141
150
  *
142
151
  * return (
143
- * <Avatar src={src} setValue={setValue} />
152
+ * <Avatar src={src} setValue={setValue} options={{defaultImage: unknown}}/>
144
153
  * )
145
154
  */
146
- declare const Avatar: ({ src, setValue }: Props$6) => react_jsx_runtime.JSX.Element;
155
+ declare const Avatar: ({ src, setValue, options }: Props$6) => react_jsx_runtime.JSX.Element;
147
156
 
148
157
  interface Props$5 {
149
158
  value?: string;
package/dist/index.d.ts CHANGED
@@ -122,6 +122,9 @@ declare const Button: ({ buttonType, content, main, first, second, text, isLoadi
122
122
  interface Props$6 {
123
123
  src?: string;
124
124
  setValue: (src?: string) => void;
125
+ options?: {
126
+ defaultImage?: string;
127
+ };
125
128
  }
126
129
  /**
127
130
  * Avatar component. Combination of
@@ -135,15 +138,21 @@ interface Props$6 {
135
138
  * @param src source of an image which will be converted to base64 format automatically
136
139
  * @param setValue set state function for src
137
140
  *
141
+ * @dataflow
142
+ * - source of an image can be undefined. This case, source should be set to default image. In case there is no default image provided, source should be undefined. As source of image is edited, source changes and updates on the image preview
143
+ * - Every source needs to be converted to base64 format using provided conversion method
144
+ * - There is a defaultImage reference that stores the value of default image across the entire component so it can be used to restore default image when clicking delete button or when source of image is undefined
145
+ * - There is an initialImage reference that stores the value of an initial value of image source
146
+ *
138
147
  * @example
139
148
  * ... component declaration
140
149
  * const [src, setValue] = useState<string|undefined>(initialImageStringUrl)
141
150
  *
142
151
  * return (
143
- * <Avatar src={src} setValue={setValue} />
152
+ * <Avatar src={src} setValue={setValue} options={{defaultImage: unknown}}/>
144
153
  * )
145
154
  */
146
- declare const Avatar: ({ src, setValue }: Props$6) => react_jsx_runtime.JSX.Element;
155
+ declare const Avatar: ({ src, setValue, options }: Props$6) => react_jsx_runtime.JSX.Element;
147
156
 
148
157
  interface Props$5 {
149
158
  value?: string;
package/dist/index.js CHANGED
@@ -1863,40 +1863,45 @@ var styles_default8 = styles8;
1863
1863
  var import_react10 = require("react");
1864
1864
  var import_jsx_runtime13 = require("react/jsx-runtime");
1865
1865
  var Avatar = function(param) {
1866
- var src = param.src, setValue = param.setValue;
1867
- var setSrc = function setSrc() {
1868
- return _async_to_generator(function() {
1869
- var translatedSrc;
1870
- return _ts_generator(this, function(_state) {
1871
- switch(_state.label){
1872
- case 0:
1873
- return [
1874
- 4,
1875
- Image_default2.FromStringToImageSrc(src)
1876
- ];
1877
- case 1:
1878
- translatedSrc = _state.sent();
1879
- if (!translatedSrc) return [
1880
- 2
1881
- ];
1882
- defaultImage.current = translatedSrc;
1883
- setValue(translatedSrc);
1884
- return [
1885
- 2
1886
- ];
1887
- }
1888
- });
1889
- })();
1890
- };
1866
+ var src = param.src, setValue = param.setValue, options = param.options;
1891
1867
  var _ref = _sliced_to_array((0, import_react10.useState)(false), 2), isOpen = _ref[0], setOpen = _ref[1];
1892
1868
  var _ref1 = _sliced_to_array((0, import_react10.useState)(false), 2), isNew = _ref1[0], setNew = _ref1[1];
1869
+ var defaultImage = (0, import_react10.useRef)(void 0);
1870
+ var initialImage = (0, import_react10.useRef)(void 0);
1893
1871
  var uploadImageRef = (0, import_react10.useRef)(null);
1894
- var defaultImage = (0, import_react10.useRef)("");
1872
+ var isAbleToEdit = initialImage.current ? src !== defaultImage.current && src !== initialImage.current : false;
1873
+ var isAbleToRemove = initialImage.current ? src !== defaultImage.current : false;
1895
1874
  (0, import_react10.useEffect)(function() {
1896
- setSrc();
1897
- }, [
1898
- src
1899
- ]);
1875
+ (function setSrc() {
1876
+ return _async_to_generator(function() {
1877
+ var _ref, _ref1;
1878
+ return _ts_generator(this, function(_state) {
1879
+ switch(_state.label){
1880
+ case 0:
1881
+ return [
1882
+ 4,
1883
+ Image_default2.FromStringToImageSrc(options === null || options === void 0 ? void 0 : options.defaultImage)
1884
+ ];
1885
+ case 1:
1886
+ defaultImage.current = (_ref = _state.sent()) !== null && _ref !== void 0 ? _ref : options === null || options === void 0 ? void 0 : options.defaultImage;
1887
+ return [
1888
+ 4,
1889
+ Image_default2.FromStringToImageSrc(src)
1890
+ ];
1891
+ case 2:
1892
+ initialImage.current = (_ref1 = _state.sent()) !== null && _ref1 !== void 0 ? _ref1 : src;
1893
+ src === initialImage.current ? setNew(function(prev) {
1894
+ return !prev;
1895
+ }) : void 0;
1896
+ setValue(src ? initialImage.current : defaultImage.current);
1897
+ return [
1898
+ 2
1899
+ ];
1900
+ }
1901
+ });
1902
+ })();
1903
+ })();
1904
+ }, []);
1900
1905
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", {
1901
1906
  style: styles_default8.container,
1902
1907
  children: [
@@ -1934,38 +1939,35 @@ var Avatar = function(param) {
1934
1939
  });
1935
1940
  }
1936
1941
  }),
1937
- src !== defaultImage.current && defaultImage.current !== "" && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, {
1942
+ isAbleToRemove && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button_default, {
1943
+ style: styles_default8.remove,
1944
+ onClick: function() {
1945
+ var _defaultImage_current;
1946
+ setValue((_defaultImage_current = defaultImage.current) !== null && _defaultImage_current !== void 0 ? _defaultImage_current : void 0);
1947
+ setNew(function(prev) {
1948
+ return !prev;
1949
+ });
1950
+ },
1938
1951
  children: [
1939
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button_default, {
1940
- style: styles_default8.remove,
1941
- onClick: function() {
1942
- setValue(defaultImage.current);
1943
- setNew(function(prev) {
1944
- return !prev;
1945
- });
1946
- },
1947
- children: [
1948
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa6.FaTrashCan, {
1949
- size: others.iconSize,
1950
- color: "red"
1951
- }),
1952
- "Remove"
1953
- ]
1952
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_fa6.FaTrashCan, {
1953
+ size: others.iconSize,
1954
+ color: "red"
1954
1955
  }),
1955
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button_default, {
1956
- style: styles_default8.edit,
1957
- onClick: function() {
1958
- return setOpen(function(prev) {
1959
- return !prev;
1960
- });
1961
- },
1962
- children: [
1963
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ri.RiEditLine, {
1964
- size: others.iconSize
1965
- }),
1966
- "Edit"
1967
- ]
1968
- })
1956
+ "Remove"
1957
+ ]
1958
+ }),
1959
+ isAbleToEdit && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Button_default, {
1960
+ style: styles_default8.edit,
1961
+ onClick: function() {
1962
+ return setOpen(function(prev) {
1963
+ return !prev;
1964
+ });
1965
+ },
1966
+ children: [
1967
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_ri.RiEditLine, {
1968
+ size: others.iconSize
1969
+ }),
1970
+ "Edit"
1969
1971
  ]
1970
1972
  })
1971
1973
  ]
package/dist/index.mjs CHANGED
@@ -1746,42 +1746,47 @@ var styles8 = {
1746
1746
  var styles_default8 = styles8;
1747
1747
  // src/components/Avatar/Avatar.tsx
1748
1748
  import { useEffect as useEffect7, useRef as useRef7, useState as useState7 } from "react";
1749
- import { Fragment, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
1749
+ import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
1750
1750
  var Avatar = function(param) {
1751
- var src = param.src, setValue = param.setValue;
1752
- var setSrc = function setSrc() {
1753
- return _async_to_generator(function() {
1754
- var translatedSrc;
1755
- return _ts_generator(this, function(_state) {
1756
- switch(_state.label){
1757
- case 0:
1758
- return [
1759
- 4,
1760
- Image_default2.FromStringToImageSrc(src)
1761
- ];
1762
- case 1:
1763
- translatedSrc = _state.sent();
1764
- if (!translatedSrc) return [
1765
- 2
1766
- ];
1767
- defaultImage.current = translatedSrc;
1768
- setValue(translatedSrc);
1769
- return [
1770
- 2
1771
- ];
1772
- }
1773
- });
1774
- })();
1775
- };
1751
+ var src = param.src, setValue = param.setValue, options = param.options;
1776
1752
  var _useState7 = _sliced_to_array(useState7(false), 2), isOpen = _useState7[0], setOpen = _useState7[1];
1777
1753
  var _useState71 = _sliced_to_array(useState7(false), 2), isNew = _useState71[0], setNew = _useState71[1];
1754
+ var defaultImage = useRef7(void 0);
1755
+ var initialImage = useRef7(void 0);
1778
1756
  var uploadImageRef = useRef7(null);
1779
- var defaultImage = useRef7("");
1757
+ var isAbleToEdit = initialImage.current ? src !== defaultImage.current && src !== initialImage.current : false;
1758
+ var isAbleToRemove = initialImage.current ? src !== defaultImage.current : false;
1780
1759
  useEffect7(function() {
1781
- setSrc();
1782
- }, [
1783
- src
1784
- ]);
1760
+ (function setSrc() {
1761
+ return _async_to_generator(function() {
1762
+ var _ref, _ref1;
1763
+ return _ts_generator(this, function(_state) {
1764
+ switch(_state.label){
1765
+ case 0:
1766
+ return [
1767
+ 4,
1768
+ Image_default2.FromStringToImageSrc(options === null || options === void 0 ? void 0 : options.defaultImage)
1769
+ ];
1770
+ case 1:
1771
+ defaultImage.current = (_ref = _state.sent()) !== null && _ref !== void 0 ? _ref : options === null || options === void 0 ? void 0 : options.defaultImage;
1772
+ return [
1773
+ 4,
1774
+ Image_default2.FromStringToImageSrc(src)
1775
+ ];
1776
+ case 2:
1777
+ initialImage.current = (_ref1 = _state.sent()) !== null && _ref1 !== void 0 ? _ref1 : src;
1778
+ src === initialImage.current ? setNew(function(prev) {
1779
+ return !prev;
1780
+ }) : void 0;
1781
+ setValue(src ? initialImage.current : defaultImage.current);
1782
+ return [
1783
+ 2
1784
+ ];
1785
+ }
1786
+ });
1787
+ })();
1788
+ })();
1789
+ }, []);
1785
1790
  return /* @__PURE__ */ jsxs11("div", {
1786
1791
  style: styles_default8.container,
1787
1792
  children: [
@@ -1819,38 +1824,35 @@ var Avatar = function(param) {
1819
1824
  });
1820
1825
  }
1821
1826
  }),
1822
- src !== defaultImage.current && defaultImage.current !== "" && /* @__PURE__ */ jsxs11(Fragment, {
1827
+ isAbleToRemove && /* @__PURE__ */ jsxs11(Button_default, {
1828
+ style: styles_default8.remove,
1829
+ onClick: function() {
1830
+ var _defaultImage_current;
1831
+ setValue((_defaultImage_current = defaultImage.current) !== null && _defaultImage_current !== void 0 ? _defaultImage_current : void 0);
1832
+ setNew(function(prev) {
1833
+ return !prev;
1834
+ });
1835
+ },
1823
1836
  children: [
1824
- /* @__PURE__ */ jsxs11(Button_default, {
1825
- style: styles_default8.remove,
1826
- onClick: function() {
1827
- setValue(defaultImage.current);
1828
- setNew(function(prev) {
1829
- return !prev;
1830
- });
1831
- },
1832
- children: [
1833
- /* @__PURE__ */ jsx13(FaTrashCan, {
1834
- size: others.iconSize,
1835
- color: "red"
1836
- }),
1837
- "Remove"
1838
- ]
1837
+ /* @__PURE__ */ jsx13(FaTrashCan, {
1838
+ size: others.iconSize,
1839
+ color: "red"
1839
1840
  }),
1840
- /* @__PURE__ */ jsxs11(Button_default, {
1841
- style: styles_default8.edit,
1842
- onClick: function() {
1843
- return setOpen(function(prev) {
1844
- return !prev;
1845
- });
1846
- },
1847
- children: [
1848
- /* @__PURE__ */ jsx13(RiEditLine, {
1849
- size: others.iconSize
1850
- }),
1851
- "Edit"
1852
- ]
1853
- })
1841
+ "Remove"
1842
+ ]
1843
+ }),
1844
+ isAbleToEdit && /* @__PURE__ */ jsxs11(Button_default, {
1845
+ style: styles_default8.edit,
1846
+ onClick: function() {
1847
+ return setOpen(function(prev) {
1848
+ return !prev;
1849
+ });
1850
+ },
1851
+ children: [
1852
+ /* @__PURE__ */ jsx13(RiEditLine, {
1853
+ size: others.iconSize
1854
+ }),
1855
+ "Edit"
1854
1856
  ]
1855
1857
  })
1856
1858
  ]
@@ -2104,7 +2106,7 @@ var InputFile = function(_param) {
2104
2106
  };
2105
2107
  var InputFile_default = InputFile;
2106
2108
  // src/components/Image/UploadImage.tsx
2107
- import { Fragment as Fragment2, jsx as jsx17 } from "react/jsx-runtime";
2109
+ import { Fragment, jsx as jsx17 } from "react/jsx-runtime";
2108
2110
  var UploadImage = function(_param) {
2109
2111
  var handleSetSrc = function handleSetSrc(file) {
2110
2112
  return _async_to_generator(function() {
@@ -2132,7 +2134,7 @@ var UploadImage = function(_param) {
2132
2134
  var _param_setSrc = _param.setSrc, setSrc = _param_setSrc === void 0 ? function() {} : _param_setSrc, props = _object_without_properties(_param, [
2133
2135
  "setSrc"
2134
2136
  ]);
2135
- return /* @__PURE__ */ jsx17(Fragment2, {
2137
+ return /* @__PURE__ */ jsx17(Fragment, {
2136
2138
  children: /* @__PURE__ */ jsx17(InputFile_default, _object_spread_props(_object_spread({
2137
2139
  onChoose: handleSetSrc,
2138
2140
  acceptType: "image/*"
@@ -2703,7 +2705,7 @@ var MainElements_styles_default = MainElementStyles;
2703
2705
  // src/components/Image/ImageEditor/MainElements/Rotate.tsx
2704
2706
  import { useEffect as useEffect10, useState as useState11 } from "react";
2705
2707
  import { FaArrowRotateLeft } from "react-icons/fa6";
2706
- import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
2708
+ import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
2707
2709
  var Rotate = function() {
2708
2710
  var _useState11 = _sliced_to_array(useState11(false), 2), rotate = _useState11[0], setRotate = _useState11[1];
2709
2711
  var _useMyContext3 = useMyContext3(), transformOperation2 = _useMyContext3.transformOperation, refs = _useMyContext3.refs;
@@ -2732,7 +2734,7 @@ var Rotate = function() {
2732
2734
  controller.abort();
2733
2735
  };
2734
2736
  }, []);
2735
- return /* @__PURE__ */ jsxs14(Fragment3, {
2737
+ return /* @__PURE__ */ jsxs14(Fragment2, {
2736
2738
  children: [
2737
2739
  /* @__PURE__ */ jsxs14("div", {
2738
2740
  ref: refs.rotate,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@willphan1712000/frontend",
3
- "version": "1.5.0",
3
+ "version": "1.5.2",
4
4
  "description": "Frontend Library",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",