AlkantarClanX12
Your IP : 216.73.217.24
const { PanelBody, SelectControl, FormTokenField } = wp.components;
import { ResetButton } from "./reset-button";
export function Sort({ value, options, onChange, onReset }) {
const [
sortBy,
condition,
sortMakes,
sortModels,
sortLocations,
sortStocks,
sortBySecondary,
conditionSecondary,
] = value;
const [sortByOptions, conditionOptions] = options;
// Create secondary sort options with "None" as first option
const sortBySecondaryOptions = [
{ label: "None", value: "none" },
...sortByOptions,
];
const pick = (override, current) => (override !== undefined ? override : current);
const emit = (overrides) => {
overrides = overrides || {};
onChange([
pick(overrides.sortBy, sortBy),
pick(overrides.condition, condition),
pick(overrides.sortMakes, sortMakes),
pick(overrides.sortModels, sortModels),
pick(overrides.sortLocations, sortLocations),
pick(overrides.sortStocks, sortStocks),
pick(overrides.sortBySecondary, sortBySecondary),
pick(overrides.conditionSecondary, conditionSecondary),
]);
};
return (
<PanelBody title="Sort">
<label className="components-base-control__label">Primary Sort</label>
<SelectControl
value={sortBy}
options={sortByOptions}
onChange={(sortBy) => emit({ sortBy })}
/>
<SelectControl
value={condition}
options={conditionOptions}
onChange={(condition) => emit({ condition })}
/>
<div style={sortBy !== "make (custom)" ? { display: "none" } : {}}>
<FormTokenField
label="Makes"
value={sortMakes}
onChange={(sortMakes) => emit({ sortMakes })}
/>
<span className="leadbox-inventory-hint">
Enter each make separated by commas.
</span>
</div>
<div style={sortBy !== "model (custom)" ? { display: "none" } : {}}>
<FormTokenField
label="Models"
value={sortModels}
onChange={(sortModels) => emit({ sortModels })}
/>
<span className="leadbox-inventory-hint">
Enter each make separated by commas.
</span>
</div>
<div style={sortBy !== "location (custom)" ? { display: "none" } : {}}>
<FormTokenField
label="Locations"
value={sortLocations}
onChange={(sortLocations) => emit({ sortLocations })}
/>
<span className="leadbox-inventory-hint">
Enter each location separated by commas.
</span>
</div>
<div style={sortBy !== "stocknumber (custom)" ? { display: "none" } : {}}>
<FormTokenField
label="Stock Numbers"
value={sortStocks}
onChange={(sortStocks) => emit({ sortStocks })}
/>
<span className="leadbox-inventory-hint">
Enter each stock number in the order you want it displayed. Press Enter or comma after each value.
</span>
</div>
<hr style={{ margin: "20px 0" }} />
<label className="components-base-control__label">Secondary Sort</label>
<SelectControl
value={sortBySecondary}
options={sortBySecondaryOptions}
onChange={(sortBySecondary) => emit({ sortBySecondary })}
/>
{sortBySecondary !== "none" && (
<SelectControl
value={conditionSecondary}
options={conditionOptions}
onChange={(conditionSecondary) => emit({ conditionSecondary })}
/>
)}
<ResetButton onReset={onReset} />
</PanelBody>
);
}