react-misc-toolbox

26.02 > accordion > > touch-friendly buttons 25.02 > imageviewer > > +> > frame's auto value is at main image value > +> > vertical imagepreview scroll to selected image > > > resolve horizontal preview proportions > > +> > resolve zoom vs scroll conflict - disable zoom while swiping > > -> > scroll vertically on vertical layout > > adjust main image values easily via props > > +> > itemheight etc. refactor > > instant edge transition > > gradual drag transition > > ready for njs-socks import 24.02 22.02 > outsideclicklistener > > +> > refactor to hooks > imageviewer > > +> > 'kbeffect', 'outsideclicklistener' renderProps to useHooks > > > itemheight etc. refactor ==20.02 > imageviewer > > > prevent scrollY on image change > > partially reveal next image with touch swipe ==17.02 > selectmany > > +> > recompose to hooks > +> > 'onChange is not a function' fix > +> > stop removeitem/items propagation > form > > > vertical layout for composition ==15.02 > composition > > > convert string to number > > pass comparison operator as an option prop ==10.02 > FORM > > > (optionally) signed composition ==09.02 > try refactor renderProps to render state with hooks: > =} imageviewer > form/selectmany | advanced composition socket > > +> > highlight selected > > > extract advancedcomp to selectmany > > focus input on selecting comp > > adjust styles > > greater/equal/lesser sign > selectmany > > > recompose to hooks ==04.01 hide/show switch option (instead of rendering anew) ==03.01 > switch | repair ==02.01 > imageviewer | accordion > imageviewer | frame/item width props test > imageviewer | 2+ image and scroll test ==01.01 +> accordion | downward navbar stuck +> accordion | listeners aren't unmounted > ==23.00 > detectcollision example ?? > add button with props spread example (e.g inside ctcgeneric) ==16.01 ctcmercury | default trigger ctcmercury | color design prop ==14.01 form | selectone takes a string instead of an object == ==09.01 #selectmany selectmany | 'dropdown stays open after clicking an option' prop == - disable hover effect for touch devices - label example instances - spm/mpm should allow greater flexibility with their renderX api &--L { &--showstarboard { @include media-max(${mediaMinThresholdShowStarboardL}) { grid-template-columns: repeat(1, 1fr); } @for $i from 0 through 5 { @include media-min-to-max( ${mediaMinThresholdShowStarboardL} + $i * ${widthItemLwithSB}, ${mediaMinThresholdShowStarboardL} + ($i + 1) * ${widthItemLwithSB} ) { grid-template-columns: repeat(2 + $i, ${columnWidth}fr); } } @include media-min(${mediaMinThresholdShowStarboardL} + 6 * ${widthItemLwithSB}) { grid-template-columns: repeat(8, ${columnWidth}fr); } } &--hidestarboard { @include media-max(${mediaMinThresholdHideStarboardL}) { grid-template-columns: repeat(1, 1fr); } @for $i from 0 through 5 { @include media-min-to-max( ${mediaMinThresholdHideStarboardL} + 1px + $i * ${widthItemLnoSB}, ${mediaMinThresholdHideStarboardL} + ($i + 1) * ${widthItemLnoSB} ) { grid-template-columns: repeat(2 + $i, ${columnWidth}fr); } } @include media-min(${mediaMinThresholdHideStarboardL} + 1px + 6 * ${widthItemLnoSB}) { grid-template-columns: repeat(8, ${columnWidth}fr); } } } &--M { &--showstarboard { @include media-max(${mediaMinThresholdShowStarboardM}) { grid-template-columns: repeat(2, 1fr); } @for $i from 0 through 9 { @include media-min-to-max( ${mediaMinThresholdShowStarboardM} + 1px + $i * ${widthItemMwithSB}, ${mediaMinThresholdShowStarboardM} + ($i + 1) * ${widthItemMwithSB} ) { grid-template-columns: repeat(3 + $i, ${columnWidth}fr); } } @include media-min( ${mediaMinThresholdShowStarboardM} + 9 * ${widthItemMwithSB} + 1px ) { grid-template-columns: repeat(12, ${columnWidth}fr); } } &--hidestarboard { @include media-max(${mediaMinThresholdHideStarboardM}) { grid-template-columns: repeat(2, 1fr); } @for $i from 0 through 9 { @include media-min-to-max( ${mediaMinThresholdHideStarboardM} + 1px + $i * ${widthItemMnoSB}, ${mediaMinThresholdHideStarboardM} + ($i + 1) * ${widthItemMnoSB} ) { grid-template-columns: repeat(3 + $i, ${columnWidth}); } } @include media-min(${mediaMinThresholdHideStarboardM} + 9 * ${widthItemMnoSB} + 1px) { grid-template-columns: repeat(12, $columnWidth); } } } #mercurydrop refactor transition styles into rtg or (better) react-move #elevator provide getButtonProps api #imageviewer write a renderBottomNav(props) #list #(color)selector #ddpo rework to use #po as ancestor #button = general qol improvements #tooltip = write #mpm # gridbox # list # page scrollnav # presentation view #form make sure it doesn't throw an error if currentOption value is incorrect # multiplepagemodal +unnest rtgfade +update flex-direction on n-of-steps change - getChildrenProps for ddpo - refactor step styles into buttons - default buttons to inherit from <Button> - test for disabled status - fix disabled tail * fix selectone/many for MANY options with a scrollable list - CTCPopover to contain triggerX/basewidth defaults * clean up basewidth/optionWidth and triggerX/triggerWidth in ddpo and its users * CTCPopover container taking up too much space fix - rtgdropdown unnest * clean up selectmany styles * find a way to handle multiple classes being passed into button - fix on/off postfixes * polish everything * get rid of all jsx in favor of inline * get rid of scss in buttons and see if it works * decouple rtgdropdown from CTCPopover * write all viable dropdown combinations * add color theme gallery to pick proper dark/light gradients accordion - bg color for svg ^- optional getProps pattern * unnest button from div - @scrollnav - @detectscroll - @Accordion - vertical - @ddp - write remaining pivots - @button - add and rework - add @confirmationrequestmodal - test with disabled up - clean up styles - extra styles option as a scoped jsx stylesheet - default styles options as inline styles