mirror of
https://github.com/ToolJet/ToolJet
synced 2026-05-05 22:38:48 +00:00
36150dc8d5
* Allow flipping non-code fields to code fields
* Revert "Allow flipping non-code fields to code fields"
This reverts commit 190e686994.
* Accept type prop to CodeHinter
* Allow CodeHinter to display UI elements instead of codebox
* Use style FxButton as flipper for code hinter
* Do not show Fx button on codehinter that allows only codebox
* Implement Select and Toggle flippable fields for code hinter
* Apply proper padding for Fx button on codehinter and its toggle component
* Make component properties remember their Fx status
* Avoid generating code when Fx is activated
* Add Fx to color field
* Add Fx to align property type
* Support json type for codehinter and remove unused Text type
* Extend codehinter width to 100%
* Fix bug that caused serverside pagination property to not work
* Remove unnecessary comments
106 lines
3.7 KiB
JavaScript
106 lines
3.7 KiB
JavaScript
import React from 'react';
|
|
import FxButton from './FxButton';
|
|
|
|
export const AlignButtons = ({ value, onChange, forceCodeBox, meta }) => {
|
|
function handleOptionChanged(event) {
|
|
onChange(event.currentTarget.value);
|
|
}
|
|
|
|
return (
|
|
<div className="row">
|
|
<div className="col-10">
|
|
<div className={`mb-3 field ${meta?.options?.className}`}>
|
|
<div style={{ display: 'flex', gap: 10 }}>
|
|
<label className="radio-img">
|
|
<input
|
|
type="radio"
|
|
name="alignment"
|
|
value="left"
|
|
onChange={handleOptionChanged}
|
|
checked={value === 'left'}
|
|
/>
|
|
<div className="action-icon">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M2 4H14M2 8H8.66667M2 12H12"
|
|
stroke={value == 'left' ? '#fff' : '#8092AC'}
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="tooltiptext">Left</span>
|
|
</label>
|
|
|
|
<label className="radio-img">
|
|
<input
|
|
type="radio"
|
|
name="alignment"
|
|
value="center"
|
|
onChange={handleOptionChanged}
|
|
checked={value === 'center'}
|
|
/>
|
|
<div className="action-icon">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M2 4H14M4.66667 8H11.3333M3.33333 12H12.6667"
|
|
stroke={value == 'center' ? '#fff' : '#8092AC'}
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="tooltiptext">Center</span>
|
|
</label>
|
|
|
|
<label className="radio-img">
|
|
<input
|
|
type="radio"
|
|
name="alignment"
|
|
value="right"
|
|
onChange={handleOptionChanged}
|
|
checked={value === 'right'}
|
|
/>
|
|
<div className="action-icon">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M2 4H14M7.33333 8H14M4 12H14"
|
|
stroke={value == 'right' ? '#fff' : '#8092AC'}
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="tooltiptext">Right</span>
|
|
</label>
|
|
|
|
<label className="radio-img">
|
|
<input
|
|
type="radio"
|
|
name="alignment"
|
|
value="justify"
|
|
onChange={handleOptionChanged}
|
|
checked={value === 'justify'}
|
|
/>
|
|
<div className="action-icon">
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M2 8H14M2 12H14M2 4H8H14H2Z"
|
|
stroke={value == 'justify' ? '#fff' : '#8092AC'}
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="tooltiptext">Justified</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-2 pt-1">
|
|
<FxButton active={false} onPress={forceCodeBox} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|