Skip to content

Commit

Permalink
#1408 squish array input buttons when cell width is small
Browse files Browse the repository at this point in the history
  • Loading branch information
ladukaraniket committed Jul 18, 2023
1 parent 6b863f0 commit eae6a7a
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 21 deletions.
8 changes: 3 additions & 5 deletions src/assets/scss/_array-field.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
.entity-value,
.select-all-input {
container-type: inline-size;
container-name: row-container;
.fieldInputContainer {
.array-input-field-container {
ul {
padding-left: 0.15rem;
}
Expand Down Expand Up @@ -90,8 +88,8 @@
}
}

@container row-container (max-width:300px) {
.fieldInputContainer {
.squished-array-buttons {
.array-input-field-container {
.input-items {
.item {
.action-buttons {
Expand Down
6 changes: 3 additions & 3 deletions src/components/input-switch/array-field.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ type ArrayFieldProps = InputFieldProps & {

type RowItem = {
id: number,
value: string | number
value: string
}

type Options = {
Expand All @@ -37,7 +37,7 @@ const ArrayField = (props: ArrayFieldProps): JSX.Element => {
const [itemList, setItemList] = useState<RowItem[]>([])
const [counter, setCounter] = useState(0);
const { disableInput, name, baseArrayType } = props;
const { getValues, setValue, watch, reset, register, unregister } = useFormContext();
const { getValues, setValue, watch, register, unregister } = useFormContext();



Expand Down Expand Up @@ -257,7 +257,7 @@ const ArrayField = (props: ArrayFieldProps): JSX.Element => {

return (
<>
<div className='fieldInputContainer'>
<div className='array-input-field-container'>
{name.includes('array_disabled') ?
<InputSwitch
{...props}
Expand Down
47 changes: 34 additions & 13 deletions src/components/recordedit/form-container.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ const FormRow = ({ columnModelIndex, needsWiderMinWidth }: FormRowProps): JSX.El
* to edit that column in other rows.
*/
const [showPermissionError, setShowPermissionError] = useState<{ [key: string]: boolean }>({});
const [windowWidth, setWindowWidth] = useState<number>(window.innerWidth)

/**
* reset the state of showing permission errors whenever the errors changed
Expand All @@ -141,11 +142,14 @@ const FormRow = ({ columnModelIndex, needsWiderMinWidth }: FormRowProps): JSX.El
}, [columnPermissionErrors]);

const container = useRef<HTMLDivElement>(null);
const showSelectAll = activeSelectAll === columnModelIndex;

/**
* make sure the column names (key-column.tsx) have the same height as FormRow
*/
useLayoutEffect(() => {
window.addEventListener('resize', () => setWindowWidth(window.innerWidth), false);

if (!container || !container.current) return;

let cachedHeight = -1;
Expand All @@ -165,6 +169,25 @@ const FormRow = ({ columnModelIndex, needsWiderMinWidth }: FormRowProps): JSX.El
}, []);


// pull the buttons in the array input closer if the cell width is below 300 px
useEffect(() => {
const rowCell = container.current?.getElementsByClassName('entity-value')[0];
const selectAllCell = container.current?.getElementsByClassName('select-all-input')[0]

if (rowCell && rowCell.clientWidth <= 300) {
container.current?.classList.add('squished-array-buttons')
} else {
container.current?.classList.remove('squished-array-buttons')
}

if (showSelectAll && selectAllCell && selectAllCell?.clientWidth <= 300) {
selectAllCell.classList.add('squished-array-buttons')
} else {
selectAllCell?.classList.remove('squished-array-buttons')
}
}, [showSelectAll, windowWidth, forms])


// ------------------------ callbacks -----------------------------------//

/**
Expand All @@ -180,18 +203,17 @@ const FormRow = ({ columnModelIndex, needsWiderMinWidth }: FormRowProps): JSX.El

// -------------------------- render logic ---------------------- //

const showSelectAll = activeSelectAll === columnModelIndex;
const columnModel = columnModels[columnModelIndex];

/**
* Returntrue if,
* - columnModel is marked as disabled
* - based on dynamic ACLs the column cannot be updated (based on canUpdateValues)
* - show all
* @param formNumber
* @param columnModel
* @param canUpdateValues
*/
* Returntrue if,
* - columnModel is marked as disabled
* - based on dynamic ACLs the column cannot be updated (based on canUpdateValues)
* - show all
* @param formNumber
* @param columnModel
* @param canUpdateValues
*/
const getIsDisabled = (formNumber?: number, isSelectAllInput?: boolean): boolean => {
if (isSelectAllInput) {
return false;
Expand Down Expand Up @@ -278,7 +300,7 @@ const FormRow = ({ columnModelIndex, needsWiderMinWidth }: FormRowProps): JSX.El
</div>
))}
</div>
{showSelectAll && <SelectAllRow columnModelIndex={columnModelIndex} />}
{showSelectAll && <SelectAllRow columnModelIndex={columnModelIndex} needsWiderMinWidth={needsWiderMinWidth}/>}
</div>
)

Expand All @@ -288,7 +310,7 @@ const FormRow = ({ columnModelIndex, needsWiderMinWidth }: FormRowProps): JSX.El
* shows the select all row
* NOTE this is its own component to avoid rerendering the whole row on each change.
*/
const SelectAllRow = ({ columnModelIndex }: FormRowProps) => {
const SelectAllRow = ({ columnModelIndex , needsWiderMinWidth}: FormRowProps) => {
const {
columnModels, forms, reference, waitingForForeignKeyData, foreignKeyData, appMode,
canUpdateValues, toggleActiveSelectAll, logRecordeditClientAction
Expand Down Expand Up @@ -393,7 +415,7 @@ const SelectAllRow = ({ columnModelIndex }: FormRowProps) => {
console.log(columnModel, colName, inputName);

return (
<div className='select-all-row match-entity-value'>
<div className={`select-all-row match-entity-value ${needsWiderMinWidth ? 'wider-min-width' : ''}`}>
<div className='select-all-text'>Set value for all records: </div>
<div className='select-all-input'>
<InputSwitch
Expand All @@ -404,7 +426,6 @@ const SelectAllRow = ({ columnModelIndex }: FormRowProps) => {
disableInput={false}
requiredInput={false}
name={inputName}
// type={columnModel.inputType === 'array' ? columnModel?.column.type.baseType.name : columnModel.inputType}
type={columnModel.inputType}
classes='column-cell-input'
columnModel={columnModel}
Expand Down

0 comments on commit eae6a7a

Please sign in to comment.