@salutejs/plasma-new-hope 0.163.1-canary.1478.11288767669.0 → 0.163.1-canary.1481.11325804971.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. package/cjs/components/Attach/Attach.js +17 -8
  2. package/cjs/components/Attach/Attach.js.map +1 -1
  3. package/emotion/cjs/components/Attach/Attach.js +17 -8
  4. package/emotion/cjs/components/Attach/Attach.template-doc.mdx +69 -0
  5. package/emotion/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +5 -5
  6. package/emotion/cjs/examples/plasma_web/components/Toast/Toast.config.js +5 -5
  7. package/emotion/es/components/Attach/Attach.js +17 -8
  8. package/emotion/es/components/Attach/Attach.template-doc.mdx +69 -0
  9. package/emotion/es/examples/plasma_b2c/components/Toast/Toast.config.js +5 -5
  10. package/emotion/es/examples/plasma_web/components/Toast/Toast.config.js +5 -5
  11. package/es/components/Attach/Attach.js +17 -8
  12. package/es/components/Attach/Attach.js.map +1 -1
  13. package/package.json +2 -2
  14. package/styled-components/cjs/components/Attach/Attach.js +17 -8
  15. package/styled-components/cjs/components/Attach/Attach.template-doc.mdx +69 -0
  16. package/styled-components/cjs/examples/plasma_b2c/components/Toast/Toast.config.js +1 -1
  17. package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js +1 -1
  18. package/styled-components/es/components/Attach/Attach.js +17 -8
  19. package/styled-components/es/components/Attach/Attach.template-doc.mdx +69 -0
  20. package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js +1 -1
  21. package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js +1 -1
  22. package/types/components/Attach/Attach.d.ts.map +1 -1
  23. package/types/components/Attach/Attach.types.d.ts +4 -0
  24. package/types/components/Attach/Attach.types.d.ts.map +1 -1
package/styled-components/cjs/examples/plasma_web/components/Toast/Toast.config.js CHANGED
@@ -14,7 +14,7 @@ var config = exports.config = {
14
14
  variations: {
15
15
  view: {
16
16
  "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
17
- dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
17
+ dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover),
18
18
  light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], _Toast.toastTokens.color, _Toast.toastTokens.background, _Toast.toastTokens.closeIconColor, _Toast.toastTokens.closeIconColorOnHover)
19
19
  },
20
20
  size: {
package/styled-components/es/components/Attach/Attach.js CHANGED
@@ -1,5 +1,5 @@
1
1
  var _IconCloseCircleOutli;
2
- var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
2
+ var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled", "id", "name", "onChange", "onClear"];
3
3
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
4
4
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
5
5
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -36,6 +36,10 @@ export var attachRoot = function attachRoot(Root) {
36
36
  style = props.style,
37
37
  isLoading = props.isLoading,
38
38
  disabled = props.disabled,
39
+ id = props.id,
40
+ name = props.name,
41
+ onChange = props.onChange,
42
+ onClear = props.onClear,
39
43
  rest = _objectWithoutProperties(props, _excluded);
40
44
  var innerRef = useRef(null);
41
45
  var ref = useForkRef(outerRef, innerRef);
@@ -104,16 +108,22 @@ export var attachRoot = function attachRoot(Root) {
104
108
  }
105
109
  inputRef.current.click();
106
110
  };
107
- var handleChange = function handleChange() {
108
- if (!inputRef.current || !inputRef.current.files) {
111
+ var handleChange = function handleChange(e) {
112
+ if (!e.target.files) {
109
113
  return;
110
114
  }
111
- setFilename(inputRef.current.files[0].name);
115
+ if (onChange) {
116
+ onChange(e);
117
+ }
118
+ setFilename(e.target.files[0].name);
112
119
  };
113
120
  var handleClear = function handleClear() {
114
121
  if (!inputRef.current) {
115
122
  return;
116
123
  }
124
+ if (onClear) {
125
+ onClear();
126
+ }
117
127
  inputRef.current.value = '';
118
128
  setFilename('');
119
129
  setTruncatedFilename('');
@@ -128,12 +138,11 @@ export var attachRoot = function attachRoot(Root) {
128
138
  ref: inputRef,
129
139
  accept: accept,
130
140
  type: "file",
131
- id: "attachHiddenInput",
132
- name: "attachHiddenInput",
141
+ id: id,
142
+ name: name,
133
143
  onChange: handleChange
134
144
  }), /*#__PURE__*/React.createElement(StyledHiddenInputHelper, {
135
- ref: inputHelperRef,
136
- id: "attachHiddenInputHelper"
145
+ ref: inputHelperRef
137
146
  }, filename), /*#__PURE__*/React.createElement(AttachButton, _extends({
138
147
  buttonType: buttonType,
139
148
  view: view,
package/styled-components/es/components/Attach/Attach.template-doc.mdx CHANGED
@@ -61,3 +61,72 @@ export function App() {
61
61
  );
62
62
  }
63
63
  ```
64
+
65
+ ### Пример использования в форме
66
+
67
+ ```tsx live
68
+ import React, { useState } from 'react';
69
+ import { Attach, Button } from '@salutejs/{{ package }}';
70
+
71
+ function App() {
72
+ const ids = ['0', '1', '2'];
73
+ const [isLoading, setIsLoading] = useState(false);
74
+ const [attachedFiles, setAttachedFiles] = useState([]);
75
+
76
+ const handleAttachFile = (e) => {
77
+ setAttachedFiles((prevAttachedFiles) => [
78
+ ...prevAttachedFiles,
79
+ {
80
+ fileData: e.target.files[0],
81
+ id: e.target.id,
82
+ },
83
+ ]);
84
+ };
85
+
86
+ const handleAttachClear = (id) => {
87
+ setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
88
+ };
89
+
90
+ const handleSubmit = (e) => {
91
+ e.preventDefault();
92
+ setIsLoading(true);
93
+
94
+ const formData = new FormData(e.target);
95
+ console.log('formData', Object.fromEntries(formData));
96
+
97
+ setTimeout(() => {
98
+ setAttachedFiles([]);
99
+ setIsLoading(false);
100
+ }, 2000);
101
+ };
102
+
103
+ return (
104
+ <>
105
+ <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
106
+ {!isLoading && attachedFiles.length > 0 && (
107
+ <div style=\{{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
108
+ {attachedFiles.map((file) => (
109
+ <span>{file.fileData.name}</span>
110
+ ))}
111
+ </div>
112
+ )}
113
+
114
+ {!isLoading && (
115
+ <form onSubmit={handleSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
116
+ {ids.map((id) => (
117
+ <Attach
118
+ id={id}
119
+ name={`attach${id}`}
120
+ text={`Загрузить файл ${id}`}
121
+ onChange={handleAttachFile}
122
+ onClear={() => handleAttachClear(id)}
123
+ />
124
+ ))}
125
+
126
+ <Button type="submit">Отправить</Button>
127
+ </form>
128
+ )}
129
+ </>
130
+ );
131
+ }
132
+ ```
package/styled-components/es/examples/plasma_b2c/components/Toast/Toast.config.js CHANGED
@@ -8,7 +8,7 @@ export var config = {
8
8
  variations: {
9
9
  view: {
10
10
  "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
11
- dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
11
+ dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
12
12
  light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
13
13
  },
14
14
  size: {
package/styled-components/es/examples/plasma_web/components/Toast/Toast.config.js CHANGED
@@ -8,7 +8,7 @@ export var config = {
8
8
  variations: {
9
9
  view: {
10
10
  "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-solid-card-brightness);", ":var(--text-secondary);", ":var(--text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
11
- dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-primary-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
11
+ dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-dark-surface-solid-brightness);", ":var(--on-dark-text-secondary);", ":var(--on-dark-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover),
12
12
  light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-light-surface-solid-primary-brightness);", ":var(--on-light-text-secondary);", ":var(--on-light-text-secondary);"], toastTokens.color, toastTokens.background, toastTokens.closeIconColor, toastTokens.closeIconColorOnHover)
13
13
  },
14
14
  size: {
package/types/components/Attach/Attach.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Attach.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC,uFAqKjE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAvKQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;CAwLtE,CAAC"}
1
+ {"version":3,"file":"Attach.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AAIvE,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAI1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,eAAO,MAAM,UAAU,SAAU,UAAU,cAAc,EAAE,WAAW,CAAC,uFA+KjE,CAAC;AAEP,eAAO,MAAM,YAAY;;;mBAjLQ,UAAU,cAAc,EAAE,WAAW,CAAC;;;;;;;;;;;;;;CAkMtE,CAAC"}
package/types/components/Attach/Attach.types.d.ts CHANGED
@@ -25,6 +25,10 @@ export declare type BaseAttachProps = {
25
25
  * Вид Attach
26
26
  */
27
27
  view?: string;
28
+ /**
29
+ * Callback при удалении прикрепленного файла
30
+ */
31
+ onClear?: () => void;
28
32
  };
29
33
  export declare type AttachButtonProps = ({
30
34
  /**
package/types/components/Attach/Attach.types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Attach.types.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,oBAAY,eAAe,GAAG;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,CAC1B;IACI;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACI,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CACN,GACG,WAAW,CAAC;AAEhB,oBAAY,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,WAAW,GAAG,eAAe,GAAG,iBAAiB,CAAC"}
1
+ {"version":3,"file":"Attach.types.d.ts","sourceRoot":"","sources":["../../../src/components/Attach/Attach.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,oBAAY,eAAe,GAAG;IAC1B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAC1C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,CAC1B;IACI;;;OAGG;IACH,UAAU,CAAC,EAAE,QAAQ,CAAC;CACzB,GACD;IACI,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CACN,GACG,WAAW,CAAC;AAEhB,oBAAY,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG,WAAW,GAAG,eAAe,GAAG,iBAAiB,CAAC"}