react-crud-mobile 1.0.67 → 1.0.69

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 (9) hide show
  1. package/dist/react-crud-mobile.cjs.development.js +80 -79
  2. package/dist/react-crud-mobile.cjs.development.js.map +1 -1
  3. package/dist/react-crud-mobile.cjs.production.min.js +1 -1
  4. package/dist/react-crud-mobile.cjs.production.min.js.map +1 -1
  5. package/dist/react-crud-mobile.esm.js +81 -80
  6. package/dist/react-crud-mobile.esm.js.map +1 -1
  7. package/package.json +1 -1
  8. package/src/elements/UIElement.tsx +141 -131
  9. package/src/elements/core/Input.tsx +6 -8
package/src/elements/UIElement.tsx CHANGED
@@ -22,7 +22,15 @@ import Switch from './core/Switch';
22
22
  import Option from './core/Option';
23
23
  import Radio from './core/Radio';
24
24
  import Input from './core/Input';
25
- import { Image, Linking, StyleSheet, Text, View } from 'react-native';
25
+ import {
26
+ Image,
27
+ Linking,
28
+ StyleSheet,
29
+ Text,
30
+ Keyboard,
31
+ TouchableWithoutFeedback,
32
+ View,
33
+ } from 'react-native';
26
34
 
27
35
  export default function UIElement(props: ElementType) {
28
36
  let [scope] = useState(ScopeUtils.create(props));
@@ -257,136 +265,138 @@ export default function UIElement(props: ElementType) {
257
265
  return (
258
266
  <>
259
267
  <View ref={ref} style={getStyle()}>
260
- {isShowLabel() && (
261
- <Text style={getStyle('label')}>{scope.getLabel()}</Text>
262
- )}
263
- {isShowInner() && (
264
- <>
265
- <View style={getStyle('inner')}>
266
- {scope.is('type', 'button') && (
267
- <Button
268
- {...defaultsUI}
269
- onClick={onClick}
270
- variant={scope.attr('variant', 'outlined')}
271
- >
272
- {original.icon && <CustomIcon />}
273
- {original.label && (
274
- <Text style={scope.getPart('label', 'button')}>
275
- {scope.getLabel()}
276
- </Text>
277
- )}
278
- </Button>
279
- )}
280
- {scope.is('type', 'icon') && (
281
- <Icon
282
- {...defaultsUI}
283
- onClick={onClick}
284
- variant={scope.attr('variant', 'outlined')}
285
- >
286
- {scope.getDisplayValue()}
287
- </Icon>
288
- )}
289
- {scope.is('type', 'link') && (
290
- <Link
291
- {...defaultsUI}
292
- onClick={onClick}
293
- variant={scope.attr('variant', 'outlined')}
294
- >
295
- {original.icon && <CustomIcon />}
296
- {original.label && (
297
- <Text style={scope.getPart('label', 'link')}>
298
- {scope.getLabel()}
299
- </Text>
300
- )}
301
- </Link>
302
- )}
303
- {scope.is(
304
- 'type',
305
- 'text',
306
- 'number',
307
- 'phone',
308
- 'postalCode',
309
- 'money',
310
- 'password',
311
- 'email'
312
- ) && (
313
- <Input
314
- {...defaultsInput}
315
- {...defaultsUI}
316
- InputProps={{ ...original.inputProps }}
317
- />
318
- )}
319
- {scope.is('type', 'complete', 'autocomplete') && (
320
- <UIComplete
321
- scope={scope}
322
- defaultsInput={defaultsInput}
323
- defaultsUI={defaultsUI}
324
- />
325
- )}
326
- {scope.is('type', 'checkbox', 'boolean', 'switch') && (
327
- <Switch
328
- checked={isChecked()}
329
- {...defaultsInput}
330
- onChange={onCheck}
331
- />
332
- )}
333
- {scope.is('type', 'select') && (
334
- <Select
335
- {...defaultsInput}
336
- {...defaultsUI}
337
- value={scope.getSelectedValue()}
338
- >
339
- <Option value={''}>Selecione</Option>
340
- {options.map((row: any, i: number) => (
341
- <Option key={'i' + i} value={row.value}>
342
- {row.label}
343
- </Option>
344
- ))}
345
- </Select>
346
- )}
347
- {scope.is('type', 'radio') && (
348
- <Radio {...defaultsInput} {...defaultsUI} row>
349
- {options.map((row: any, i: number) => (
350
- <Option
351
- key={'i' + i}
352
- control={<Radio {...defaultsUI} />}
353
- label={row.label}
354
- value={row.value}
355
- />
356
- ))}
357
- </Radio>
358
- )}
359
- {scope.is('type', 'custom') && <Custom />}
360
- {scope.is('type', 'column') && (
361
- <>
362
- {scope.is('format', 'img') && (
363
- <Image source={scope.getDisplayValue()} />
364
- )}
365
- {scope.is('format', 'icon') && (
366
- <Icon className={scope.getDisplayValue()} />
367
- )}
368
- {!scope.is('format', 'icon', 'img') && (
369
- <Text>{scope.getDisplayValue()}</Text>
370
- )}
371
- </>
372
- )}
373
- {scope.is('type', 'output') && (
374
- <Text>{scope.getDisplayValue()}</Text>
375
- )}
376
- </View>
377
- {error && <View style={getStyle('error')}>{error}</View>}
378
- </>
379
- )}
380
- <CurrentRouter />
381
- {!scope.is(
382
- 'type',
383
- 'card',
384
- 'tabs',
385
- 'grid',
386
- 'list',
387
- 'define',
388
- 'repeat'
389
- ) && <UIChildren {...props} scope={scope} crud={crud} />}
268
+ <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
269
+ {isShowLabel() && (
270
+ <Text style={getStyle('label')}>{scope.getLabel()}</Text>
271
+ )}
272
+ {isShowInner() && (
273
+ <>
274
+ <View style={getStyle('inner')}>
275
+ {scope.is('type', 'button') && (
276
+ <Button
277
+ {...defaultsUI}
278
+ onClick={onClick}
279
+ variant={scope.attr('variant', 'outlined')}
280
+ >
281
+ {original.icon && <CustomIcon />}
282
+ {original.label && (
283
+ <Text style={scope.getPart('label', 'button')}>
284
+ {scope.getLabel()}
285
+ </Text>
286
+ )}
287
+ </Button>
288
+ )}
289
+ {scope.is('type', 'icon') && (
290
+ <Icon
291
+ {...defaultsUI}
292
+ onClick={onClick}
293
+ variant={scope.attr('variant', 'outlined')}
294
+ >
295
+ {scope.getDisplayValue()}
296
+ </Icon>
297
+ )}
298
+ {scope.is('type', 'link') && (
299
+ <Link
300
+ {...defaultsUI}
301
+ onClick={onClick}
302
+ variant={scope.attr('variant', 'outlined')}
303
+ >
304
+ {original.icon && <CustomIcon />}
305
+ {original.label && (
306
+ <Text style={scope.getPart('label', 'link')}>
307
+ {scope.getLabel()}
308
+ </Text>
309
+ )}
310
+ </Link>
311
+ )}
312
+ {scope.is(
313
+ 'type',
314
+ 'text',
315
+ 'number',
316
+ 'phone',
317
+ 'postalCode',
318
+ 'money',
319
+ 'password',
320
+ 'email'
321
+ ) && (
322
+ <Input
323
+ {...defaultsInput}
324
+ {...defaultsUI}
325
+ InputProps={{ ...original.inputProps }}
326
+ />
327
+ )}
328
+ {scope.is('type', 'complete', 'autocomplete') && (
329
+ <UIComplete
330
+ scope={scope}
331
+ defaultsInput={defaultsInput}
332
+ defaultsUI={defaultsUI}
333
+ />
334
+ )}
335
+ {scope.is('type', 'checkbox', 'boolean', 'switch') && (
336
+ <Switch
337
+ checked={isChecked()}
338
+ {...defaultsInput}
339
+ onChange={onCheck}
340
+ />
341
+ )}
342
+ {scope.is('type', 'select') && (
343
+ <Select
344
+ {...defaultsInput}
345
+ {...defaultsUI}
346
+ value={scope.getSelectedValue()}
347
+ >
348
+ <Option value={''}>Selecione</Option>
349
+ {options.map((row: any, i: number) => (
350
+ <Option key={'i' + i} value={row.value}>
351
+ {row.label}
352
+ </Option>
353
+ ))}
354
+ </Select>
355
+ )}
356
+ {scope.is('type', 'radio') && (
357
+ <Radio {...defaultsInput} {...defaultsUI} row>
358
+ {options.map((row: any, i: number) => (
359
+ <Option
360
+ key={'i' + i}
361
+ control={<Radio {...defaultsUI} />}
362
+ label={row.label}
363
+ value={row.value}
364
+ />
365
+ ))}
366
+ </Radio>
367
+ )}
368
+ {scope.is('type', 'custom') && <Custom />}
369
+ {scope.is('type', 'column') && (
370
+ <>
371
+ {scope.is('format', 'img') && (
372
+ <Image source={scope.getDisplayValue()} />
373
+ )}
374
+ {scope.is('format', 'icon') && (
375
+ <Icon className={scope.getDisplayValue()} />
376
+ )}
377
+ {!scope.is('format', 'icon', 'img') && (
378
+ <Text>{scope.getDisplayValue()}</Text>
379
+ )}
380
+ </>
381
+ )}
382
+ {scope.is('type', 'output') && (
383
+ <Text>{scope.getDisplayValue()}</Text>
384
+ )}
385
+ </View>
386
+ {error && <View style={getStyle('error')}>{error}</View>}
387
+ </>
388
+ )}
389
+ <CurrentRouter />
390
+ {!scope.is(
391
+ 'type',
392
+ 'card',
393
+ 'tabs',
394
+ 'grid',
395
+ 'list',
396
+ 'define',
397
+ 'repeat'
398
+ ) && <UIChildren {...props} scope={scope} crud={crud} />}
399
+ </TouchableWithoutFeedback>
390
400
  </View>
391
401
  </>
392
402
  );
package/src/elements/core/Input.tsx CHANGED
@@ -1,24 +1,22 @@
1
1
  import { useState } from 'react';
2
- import { ChildType } from 'react-crud-utils';
2
+ import { ChildType, Utils } from 'react-crud-utils';
3
3
  import { StyleSheet, TextInput } from 'react-native';
4
4
 
5
5
  export default function Input(props: ChildType) {
6
6
  let scope = props.scope;
7
- let value = scope.getValue();
7
+ let initial = Utils.nvl(scope.getValue(), '');
8
+
8
9
  let label = scope.getLabel();
9
10
  let placeholder = scope.getPart('placeholder', null, label);
10
- let [index, setIndex] = useState(0);
11
+
12
+ const [value, setValue] = useState(initial);
11
13
 
12
14
  let onChange = v => {
13
15
  scope.changeValue(v);
14
16
 
15
- setIndex(++index);
17
+ setValue(v);
16
18
  };
17
19
 
18
- if (!value) {
19
- value = '';
20
- }
21
-
22
20
  return (
23
21
  <TextInput
24
22
  style={styles.input}