Skip to content

Commit

Permalink
metadata as object entries
Browse files Browse the repository at this point in the history
  • Loading branch information
@cblanquera
cblanquera committed Jun 14, 2023
1 parent 5b112b8 commit e345761
Show file tree
Hide file tree
Showing 9 changed files with 48 additions and 89 deletions.
40 changes: 20 additions & 20 deletions build/entry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -599,16 +599,16 @@ const App = () => {
<div style={{ padding: '10px 0', marginTop: '40px' }}>
<Control label="Metadata">
<Metadata
value={[{name: 'a', value: 'b'}, {name: 'c', value: 'd'}]}
onUpdate={console.log}
value={[['a', 'b'], ['c', 'd']]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
/>
</Control>
</div>
<PrettyCode code={`
<Control label="Metadata">
<Metadata
value={[{name: 'a', value: 'b'}, {name: 'c', value: 'd'}]}
onUpdate={console.log}
value={[['a', 'b'], ['c', 'd']]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
/>
</Control>
`} />
Expand All @@ -619,8 +619,8 @@ const App = () => {
min="0"
max="10000000"
step="0.01"
value={[{name: 'a', value: 2.05}, {name: 'c', value: 10000}]}
onUpdate={console.log}
value={[['a', 2.05], ['c', 10000]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
error={true}
/>
</Control>
Expand All @@ -632,8 +632,8 @@ const App = () => {
min="0"
max="10000000"
step="0.01"
value={[{name: 'a', value: 2.05}, {name: 'c', value: 10000}]}
onUpdate={console.log}
value={[['a', 2.05], ['c', 10000]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
error={true}
/>
</Control>
Expand All @@ -642,44 +642,44 @@ const App = () => {
<Control label="Meta Dates">
<Metadata
type="date"
value={[{name: 'a', value: Date.now()}, {name: 'c', value: new Date}]}
onUpdate={console.log}
value={[['a', Date.now()], ['c', new Date]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
/>
</Control>
</div>
<PrettyCode code={`
<Control label="Meta Dates">
<Metadata
type="date"
value={[{name: 'a', value: Date.now()}, {name: 'c', value: new Date}]}
onUpdate={console.log}
value={[['a', Date.now()], ['c', new Date]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
/>
</Control>
`} />
<div style={{ padding: '10px 0', marginTop: '40px' }}>
<Control label="Meta Times" className="text-xs my-4">
<Metadata
type="time"
value={[{name: 'a', value: Date.now()}, {name: 'c', value: new Date}]}
onUpdate={console.log}
value={[['a', Date.now()], ['c', new Date]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
/>
</Control>
</div>
<PrettyCode code={`
<Control label="Meta Times" className="text-xs my-4">
<Metadata
type="time"
value={[{name: 'a', value: Date.now()}, {name: 'c', value: new Date}]}
onUpdate={console.log}
value={[['a', Date.now()], ['c', new Date]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
/>
</Control>
`} />
<div style={{ padding: '10px 0', marginTop: '40px' }}>
<Control label="Meta Datetimes With Errors" error="something">
<Metadata
type="datetime"
value={[{name: 'a', value: Date.now()}, {name: 'c', value: new Date}]}
onUpdate={console.log}
value={[['a', Date.now()], ['c', new Date]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
error={true}
/>
</Control>
Expand All @@ -688,8 +688,8 @@ const App = () => {
<Control label="Meta Datetimes With Errors" error="something">
<Metadata
type="datetime"
value={[{name: 'a', value: Date.now()}, {name: 'c', value: new Date}]}
onUpdate={console.log}
value={[['a', Date.now()], ['c', new Date]]}
onUpdate={entries => console.log(Object.fromEntries(entries))}
error={true}
/>
</Control>
Expand Down
2 changes: 1 addition & 1 deletion docs/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "frui",
"version": "0.0.7",
"version": "0.0.8",
"license": "MIT",
"description": "A collection of vanilla react and tailwind components written in typescript.",
"author": "Chris <[email protected]>",
Expand Down
9 changes: 5 additions & 4 deletions src/hooks/useFieldMetadata.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@ import { useState } from 'react';
export default function useFieldMetadata(config: FieldMetadataConfig) {
const { type, values, index, set } = config;
//hooks
const [ name, setName ] = useState(values ? values[index]?.name || '': '');
const [ value, setValue ] = useState<any>(values ? values[index]?.value || '': '');
const row = values ? values[index]: undefined;
const [ name, setName ] = useState(Array.isArray(row) ? row[0] || '': '');
const [ value, setValue ] = useState<any>(Array.isArray(row) ? row[1] || '': '');

const isNumber = type === 'number';
const isDate = ['date', 'time', 'datetime'].includes(type || '');
Expand All @@ -18,10 +19,10 @@ export default function useFieldMetadata(config: FieldMetadataConfig) {
const newValues = [ ...(values || []) ];
if (key === 'name') {
setName(input);
newValues[index] = { name: input, value };
newValues[index] = [ input, value ];
} else {
setValue(value);
newValues[index] = { name, value: input };
newValues[index] = [ name, input];
}
set(newValues);
},
Expand Down
30 changes: 10 additions & 20 deletions src/react/FieldMetadata.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
});

//variables
const value = values ? values[index]: undefined;
const map = {
styles: makeGroupStyles(styles, {
row: {
Expand Down Expand Up @@ -100,7 +101,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
<FieldInput
style={map.styles.name}
className={map.classNames.name}
defaultValue={values ? values[index]?.name: undefined}
defaultValue={Array.isArray(value) ? value[0]: undefined}
onUpdate={(name) => handlers.update('name', name)}
error={error}
required
Expand All @@ -110,7 +111,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type={type}
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value as string|number: undefined}
defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
onUpdate={value => handlers.update('value', value)}
error={error}
required
Expand All @@ -123,7 +124,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
step={step}
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value as string|number: undefined}
defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
onUpdate={(value: string) => handlers.update('value', value)}
error={error}
required
Expand All @@ -134,7 +135,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type="date"
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value: undefined}
defaultValue={Array.isArray(value) ? value[1]: undefined}
onUpdate={value => handlers.update('value', value)}
error={error}
required
Expand All @@ -145,7 +146,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type="time"
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value: undefined}
defaultValue={Array.isArray(value) ? value[1]: undefined}
onUpdate={(value: string) => handlers.update('value', value)}
error={error}
required
Expand All @@ -156,7 +157,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type="datetime-local"
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value: undefined}
defaultValue={Array.isArray(value) ? value[1]: undefined}
onUpdate={(value) => handlers.update('value', value)}
error={error}
required
Expand All @@ -178,20 +179,9 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
/**
* Metadata Fieldset Component (Main)
*/
const Metadata: React.FC<FieldsetProps<FieldMetadataType>> = (props) => {
const { label, value, type, onChange, ...attributes } = props;
const FieldMetadata: React.FC<FieldsetProps<FieldMetadataType>> = (props) => {
const Fieldset = make<FieldMetadataType>(Fields);

return (
<Fieldset
{...attributes}
value={value}
label={label}
type={type}
emptyValue={{ name: '', value: '' }}
onChange={onChange}
/>
);
return (<Fieldset {...props} emptyValue={['', '']} />);
}

export default Metadata;
export default FieldMetadata;
13 changes: 1 addition & 12 deletions src/react/FieldTextlist.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,19 +89,8 @@ const Fields: React.FC<FieldsProps<FieldTextlistType>> = (props) => {
* Textlist Fieldset Component (Main)
*/
const FieldTextlist: React.FC<FieldsetProps<FieldTextlistType>> = (props) => {
const { label, value, type, onChange, ...attributes } = props;
const Fieldset = make<FieldTextlistType>(Fields);

return (
<Fieldset
{...attributes}
value={value}
label={label}
type={type}
emptyValue={''}
onChange={onChange}
/>
);
return (<Fieldset {...props} emptyValue={''} />);
}

export default FieldTextlist;
26 changes: 8 additions & 18 deletions src/tailwind/FieldMetadata.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
});

//variables
const value = values ? values[index]: undefined;
const map = {
styles: makeGroupStyles(styles, {
row: undefined,
Expand Down Expand Up @@ -100,7 +101,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
<FieldInput
style={map.styles.name}
className={map.classNames.name}
defaultValue={values ? values[index]?.name: undefined}
defaultValue={Array.isArray(value) ? value[0]: undefined}
onUpdate={(name) => handlers.update('name', name)}
error={error}
required
Expand All @@ -110,7 +111,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type={type}
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value as string|number: undefined}
defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
onUpdate={(value) => handlers.update('value', value)}
error={error}
required
Expand All @@ -123,7 +124,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
step={step}
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value as string|number: undefined}
defaultValue={Array.isArray(value) ? value[1] as string|number: undefined}
onUpdate={(value: string) => handlers.update('value', value)}
error={error}
required
Expand All @@ -134,7 +135,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type="date"
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value: undefined}
defaultValue={Array.isArray(value) ? value[1]: undefined}
onUpdate={(value) => handlers.update('value', value)}
error={error}
required
Expand All @@ -145,7 +146,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type="time"
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value: undefined}
defaultValue={Array.isArray(value) ? value[1]: undefined}
onUpdate={(value: string) => handlers.update('value', value)}
error={error}
required
Expand All @@ -156,7 +157,7 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
type="datetime-local"
style={map.styles.value}
className={map.classNames.value}
defaultValue={values ? values[index]?.value: undefined}
defaultValue={Array.isArray(value) ? value[1]: undefined}
onUpdate={(value) => handlers.update('value', value)}
error={error}
required
Expand All @@ -179,19 +180,8 @@ const Fields: React.FC<FieldsProps<FieldMetadataType>> = (props) => {
* Metadata Fieldset Component (Main)
*/
const FieldMetadata: React.FC<FieldsetProps<FieldMetadataType>> = (props) => {
const { label, value, type, onChange, ...attributes } = props;
const Fieldset = make<FieldMetadataType>(Fields);

return (
<Fieldset
{...attributes}
value={value}
label={label}
type={type}
emptyValue={{ name: '', value: '' }}
onChange={onChange}
/>
);
return (<Fieldset {...props} emptyValue={['', '']} />);
}

export default FieldMetadata;
13 changes: 1 addition & 12 deletions src/tailwind/FieldTextlist.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,19 +81,8 @@ const Fields: React.FC<FieldsProps<FieldTextlistType>> = (props) => {
* Textlist Component (Main)
*/
const FieldTextlist: React.FC<FieldsetProps<FieldTextlistType>> = (props) => {
const { label, value, type, onChange, ...attributes } = props;
const Fieldset = make<FieldTextlistType>(Fields);

return (
<Fieldset
{...attributes}
value={value}
label={label}
type={type}
emptyValue={''}
onChange={onChange}
/>
);
return (<Fieldset {...props} emptyValue={''} />);
}

export default FieldTextlist;
2 changes: 1 addition & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export type FieldMaskProps = FieldInputProps & {
};

// Field metadata component
export type FieldMetadataType = { name: string, value: string|number|Date };
export type FieldMetadataType = [ string, string|number|Date ];
export type FieldMetadataConfig = {
type?: string,
values?: (FieldMetadataType|undefined)[],
Expand Down

0 comments on commit e345761

Please sign in to comment.