aio-popup 6.1.0 → 6.3.0

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 (4) hide show
  1. package/index.css +5 -5
  2. package/index.d.ts +5 -0
  3. package/index.js +68 -55
  4. package/package.json +1 -1
package/index.css CHANGED
@@ -64,7 +64,7 @@
64
64
  .aio-popup-position-top>.aio-popup {
65
65
  width: 100%;
66
66
  max-height: 90vh;
67
- transform: translateY(0px);
67
+ transform: none;
68
68
  }
69
69
 
70
70
  /**********position (bottom)***********/
@@ -82,7 +82,7 @@
82
82
  width: 100%;
83
83
  bottom: 0;
84
84
  opacity: 1;
85
- transform: scaleY(1);
85
+ transform: none;
86
86
  }
87
87
 
88
88
  /**********position (left)*************/
@@ -97,7 +97,7 @@
97
97
  .aio-popup-position-left>.aio-popup {
98
98
  height: 100%;
99
99
  max-width: 90vh;
100
- transform: translateX(0px);
100
+ transform: none;
101
101
  }
102
102
 
103
103
  /**********position (right)************/
@@ -112,7 +112,7 @@
112
112
  .aio-popup-position-right>.aio-popup {
113
113
  height: 100%;
114
114
  max-width: 90vh;
115
- transform: translateX(0px) scaleX(1);
115
+ transform: none;
116
116
  ;
117
117
  }
118
118
 
@@ -136,7 +136,7 @@
136
136
  width: fit-content;
137
137
  opacity: 1;
138
138
  max-height: 100vh;
139
- transform: translateY(0px);
139
+ transform: none;
140
140
  transform-origin: top;
141
141
  }
142
142
 
package/index.d.ts CHANGED
@@ -77,15 +77,20 @@ export type AP_confirm = {
77
77
  canselText?: string;
78
78
  onSubmit?: () => Promise<boolean>;
79
79
  onCansel?: () => void;
80
+ submitAttrs?: any;
81
+ canselAttrs?: any;
80
82
  setAttrs?: AP_setAttrs;
81
83
  };
82
84
  export type AP_prompt = {
83
85
  title?: string;
86
+ text: string;
84
87
  subtitle?: string;
85
88
  submitText?: string;
86
89
  canselText?: string;
87
90
  onSubmit?: (text: string) => Promise<boolean>;
88
91
  onCansel?: () => void;
92
+ submitAttrs?: any;
93
+ canselAttrs?: any;
89
94
  setAttrs?: AP_setAttrs;
90
95
  };
91
96
  type AP_removeModal = (arg?: string) => void;
package/index.js CHANGED
@@ -160,62 +160,75 @@ const usePopup = (props) => {
160
160
  const removeHighlight = () => setHighlight(undefined);
161
161
  const addConfirm = (obj) => {
162
162
  let { title, subtitle, text, submitText = 'Yes', canselText = 'No', onSubmit, onCansel = () => { }, setAttrs = () => { return {}; } } = obj;
163
+ const submitAttrs = AddToAttrs(obj.submitAttrs, {
164
+ className: 'active', attrs: {
165
+ onClick: () => __awaiter(void 0, void 0, void 0, function* () {
166
+ if (!onSubmit) {
167
+ return;
168
+ }
169
+ let res = yield onSubmit();
170
+ if (res !== false) {
171
+ removeModal();
172
+ }
173
+ }),
174
+ type: 'button'
175
+ }
176
+ });
177
+ const canselAttrs = AddToAttrs(obj.canselAttrs, {
178
+ attrs: {
179
+ onClick: () => { onCansel(); removeModal(); },
180
+ type: 'button'
181
+ }
182
+ });
163
183
  let config = {
164
- position: 'center',
184
+ position: 'center', header: { title, subtitle }, body: _jsx(_Fragment, { children: text }),
165
185
  setAttrs: (key) => {
166
186
  let attrs = setAttrs(key);
167
- if (key === 'modal') {
168
- return AddToAttrs(attrs, { className: 'aio-popup-confirm' });
169
- }
170
- return attrs;
187
+ return key === 'modal' ? AddToAttrs(attrs, { className: 'aio-popup-confirm' }) : attrs;
171
188
  },
172
- header: { title, subtitle },
173
- body: _jsx(_Fragment, { children: text }),
174
- footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: 'button', onClick: () => { onCansel(); removeModal(); }, children: canselText }), _jsx("button", { type: 'button', className: 'active', onClick: () => __awaiter(void 0, void 0, void 0, function* () {
175
- if (!onSubmit) {
176
- return;
177
- }
178
- let res = yield onSubmit();
179
- if (res !== false) {
180
- removeModal();
181
- }
182
- }), children: submitText })] }))
189
+ footer: (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({}, canselAttrs, { children: canselText })), _jsx("button", Object.assign({}, submitAttrs, { children: submitText }))] }))
183
190
  };
184
191
  addModal(config);
185
192
  };
186
193
  const addPrompt = (obj) => {
187
194
  const id = 'a' + (Math.round(Math.random() * 100000));
188
- let { title, subtitle, submitText = 'Submit', canselText = 'close', onSubmit, onCansel = () => { }, setAttrs = () => { return {}; } } = obj;
195
+ let { title, text = '', subtitle, submitText = 'Submit', canselText = 'close', onSubmit, onCansel = () => { }, setAttrs = () => { return {}; } } = obj;
196
+ const submitAttrs = AddToAttrs(obj.submitAttrs, {
197
+ className: 'active', attrs: {
198
+ onClick: () => __awaiter(void 0, void 0, void 0, function* () {
199
+ if (!onSubmit) {
200
+ return;
201
+ }
202
+ const value = promptTexts.current[id];
203
+ let res = yield onSubmit(value);
204
+ if (res !== false) {
205
+ removeModal();
206
+ }
207
+ else {
208
+ const newPromptTexts = {};
209
+ for (let prop in promptTexts.current) {
210
+ if (prop !== id) {
211
+ newPromptTexts[prop] = promptTexts.current[prop];
212
+ }
213
+ }
214
+ promptTexts.current = newPromptTexts;
215
+ }
216
+ }),
217
+ type: 'button'
218
+ }
219
+ });
220
+ const canselAttrs = AddToAttrs(obj.canselAttrs, { attrs: {
221
+ onClick: () => { onCansel(); removeModal(); },
222
+ type: 'button'
223
+ } });
189
224
  let config = {
190
- position: 'center',
225
+ position: 'center', header: { title, subtitle },
191
226
  setAttrs: (key) => {
192
227
  let attrs = setAttrs(key);
193
- if (key === 'modal') {
194
- return AddToAttrs(attrs, { className: 'aio-popup-prompt' });
195
- }
196
- return attrs;
228
+ return key === 'modal' ? AddToAttrs(attrs, { className: 'aio-popup-prompt' }) : attrs;
197
229
  },
198
- header: { title, subtitle },
199
- body: _jsx(Prompt, { change: (value) => promptTexts.current = Object.assign(Object.assign({}, promptTexts.current), { [id]: value }) }),
200
- footer: (_jsxs(_Fragment, { children: [_jsx("button", { type: 'button', onClick: () => { onCansel(); removeModal(); }, children: canselText }), _jsx("button", { type: 'button', className: 'active', onClick: () => __awaiter(void 0, void 0, void 0, function* () {
201
- if (!onSubmit) {
202
- return;
203
- }
204
- const value = promptTexts.current[id];
205
- let res = yield onSubmit(value);
206
- if (res !== false) {
207
- removeModal();
208
- }
209
- else {
210
- const newPromptTexts = {};
211
- for (let prop in promptTexts.current) {
212
- if (prop !== id) {
213
- newPromptTexts[prop] = promptTexts.current[prop];
214
- }
215
- }
216
- promptTexts.current = newPromptTexts;
217
- }
218
- }), children: submitText })] }))
230
+ body: _jsx(Prompt, { change: (value) => promptTexts.current = Object.assign(Object.assign({}, promptTexts.current), { [id]: value }), placeholder: text }),
231
+ footer: (_jsxs(_Fragment, { children: [_jsx("button", Object.assign({}, canselAttrs, { children: canselText })), _jsx("button", Object.assign({}, submitAttrs, { children: submitText }))] }))
219
232
  };
220
233
  addModal(config);
221
234
  };
@@ -235,9 +248,9 @@ const usePopup = (props) => {
235
248
  return { addAlert, addSnackebar, removeModal, addModal, getModals, addHighlight, removeHighlight, render, addConfirm, addPrompt, portal };
236
249
  };
237
250
  export default usePopup;
238
- const Prompt = ({ change }) => {
251
+ const Prompt = ({ change, placeholder }) => {
239
252
  const [text, setText] = useState('');
240
- return (_jsx("textarea", { placeholder: text, value: text, onChange: (e) => { const value = e.target.value; setText(value); change(value); } }));
253
+ return (_jsx("textarea", { placeholder: placeholder, value: text, onChange: (e) => { const value = e.target.value; setText(value); change(value); } }));
241
254
  };
242
255
  const POPUPCTX = createContext({});
243
256
  const Popup = ({ modal, isLast, renderCaller }) => {
@@ -718,16 +731,16 @@ function getEasing(highlight) {
718
731
  const { easing } = highlight;
719
732
  var easingNames = [
720
733
  'linear',
721
- 'easeInQuad', //1
722
- 'easeInSine', //5
723
- 'easeInCirc', //7
724
- 'easeInBack', //8
725
- 'easeOutQuad', //9
726
- 'easeOutSine', //13
727
- 'easeOutCirc', //15
728
- 'easeInOutQuad', //18
729
- 'easeInOutSine', //22
730
- 'easeInOutBack', //25
734
+ 'easeInQuad',
735
+ 'easeInSine',
736
+ 'easeInCirc',
737
+ 'easeInBack',
738
+ 'easeOutQuad',
739
+ 'easeOutSine',
740
+ 'easeOutCirc',
741
+ 'easeInOutQuad',
742
+ 'easeInOutSine',
743
+ 'easeInOutBack',
731
744
  'easeOutBounce', //27
732
745
  ];
733
746
  if (typeof easing === 'number') {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "aio-popup",
3
- "version": "6.1.0",
3
+ "version": "6.3.0",
4
4
  "description": "handle all types of popup and modals in react",
5
5
  "main": "index.js",
6
6
  "scripts": {